<template>
  <div class="container">
    <navbar title="申请代理" theme="light"></navbar>
    <list >
      <cell>
        <wxc-cell title="您的称呼"
                  :has-top-border="true">
          <xinput placeholder="请输入您的称呼" style="flex: 1" textAlign="right" :value.sync="params.contactName"></xinput>
        </wxc-cell>
        <wxc-cell title="联系手机">
          <xinput type="number" placeholder="请输入您的手机号" style="flex: 1" textAlign="right" :value.sync="params.phone"></xinput>
        </wxc-cell>
        <div class="box" style="margin-top: 12;">
          <textarea class="apply-content" placeholder="请输入您的申请内容" rows="5" v-model="params.content"></textarea>
        </div>
      </cell>
      <cell>
        <div class="box">
          <text class="box-title text-left">选择代理类型</text>
          <div class="box-panel">
            <wxc-grid-select
                :single="true"
                :cols="4"
                :customStyles="customStyles"
                :list="agentTypeList"
                @select="params => selectAgentType(params)">
            </wxc-grid-select>
          </div>
        </div>
      </cell>
      <cell>
        <wxc-cell title="选择代理城市"
                  v-if="agentType === 'CITY'"
                  @wxcCellClicked="showCitySelector"
                  :has-arrow="true"
                  :has-top-border="true">
          <text slot="value" class="cell-value">{{cityName}}</text>
        </wxc-cell>
        <wxc-cell title="选择代理县/区"
                  v-if="agentType === 'DISTRICT'"
                  @wxcCellClicked="showDistrictSelector"
                  :has-arrow="true"
                  :has-top-border="true">
          <text slot="value" class="cell-value">{{districtName}}</text>
        </wxc-cell>
      </cell>
      <cell>
        <div class="btn-wrapper">
          <text :class="['btn-primary','btn','btn-large', 'activeable', (!validateOk || applyDoing) && 'btn-disabled', 'login-btn']" @click="doApply">{{applyDoing ? '正在提交' : '提交申请'}}</text>
        </div>
      </cell>
    </list>
    <region-selector ref="citySelector" level="1" @select="selectCity"></region-selector>
    <region-selector ref="districtSelector" level="2" @select="selectDistrict"></region-selector>
    <wxc-loading :show="isLoadingShow" ></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  @import "./sass/box";
  .container {
    background-color: $body-bg;
  }
  .apply {
    &-content {
      color: $color;
      font-size: 30px;
      line-height: 36px;
      padding: 20px;
    }
  }
  .box-panel {
    padding: 30px 20px;
  }
  .cell-value {
    font-size: 30px;
    color: $brand-primary;
  }
  .btn-wrapper {
    margin: 50px 20px;
  }
</style>
<script>
import {WxcLoading, WxcGridSelect, WxcCell} from 'weex-ui'
let api = require('./include/api')
let theme = require('./include/theme')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    'region-selector': require('./components/region-selector.vue'),
    WxcLoading,
    WxcGridSelect,
    WxcCell,
    xinput: require('./components/input.vue')
  },
  props: {
    back: {default: true},
    height: {default: 0}
  },
  data () {
    return {
      isLoadingShow: false,
      customStyles: {
        lineSpacing: '14px',
        width: '160px',
        height: '80px',
        icon: '',
        color: theme.color.default,
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#ddd',
        checkedBorderColor: theme.brand.primary,
        backgroundColor: '#ffffff',
        checkedBackgroundColor: theme.brand.primary
      },
      cityName: '',
      districtName: '',
      validateOk: false,
      applyDoing: false,
      agentTypeList: [
        {
          'title': '市级代理',
          checked: true,
          type: 'CITY'
        },
        {
          'title': '县级代理',
          type: 'DISTRICT'
        }
      ],
      agentType: 'CITY',
      params: {
        cityId: 0,
        districtId: 0,
        phone: '',
        contactName: '',
        content: ''
      }
    }
  },
  created () {
    this.$watch('params', () => {
      this.validateOk = this.validate()
    }, {deep: true})
  },
  methods: {
    loadData () {

    },
    validate () {
      if (!this.params.phone || this.params.phone.length !== 11) {
        return false
      }
      if (!this.params.contactName || this.params.contactName.length === 0) {
        return false
      }
      if (!this.params.content || this.params.content.length === 0) {
        return false
      }
      if (this.agentType === 'CITY') {
        if (!this.params.cityId) {
          return false
        }
      } else if (this.agentType === 'DISTRICT') {
        if (!this.params.cityId || !this.params.districtId) {
          return false
        }
      }
      return true
    },
    showCitySelector () {
      this.$refs.citySelector.show()
    },
    showDistrictSelector () {
      this.$refs.districtSelector.show()
    },
    selectCity (region) {
      this.cityName = region.city.name
      this.params.cityId = region.city.id
    },
    selectDistrict (region) {
      this.districtName = region.city.name + region.district.name
      this.params.cityId = region.city.id
      this.params.districtId = region.district.id
    },
    selectAgentType (params) {
      let index = params.selectIndex
      let checked = params.checked
      if (checked) {
        this.agentType = this.agentTypeList[index].type
      } else {
        this.agentType = ''
      }
    },
    doApply () {
      if (!this.validateOk || this.applyDoing) {
        return
      }
      this.applyDoing = true
      this.isLoadingShow = true
      var methodName
      if (this.agentType === 'CITY') {
        methodName = 'applyCityAgent'
      } else if (this.agentType === 'DISTRICT') {
        methodName = 'applyDistrictAgent'
      }
      api.agentApply[methodName](this.params).done(rs => {
        // let data = rs.data
        modal.alert({message: '代理申请提交成功，我们将尽快审核，并与您取得联系，请保持电话畅通'}, () => {
          navigator.pop()
        })
      }).always(rs => {
        this.isLoadingShow = false
        this.applyDoing = false
      })
    }
  }
}
</script>
